import React, { useEffect, useState } from 'react';
import { getTemAll1 } from '../../../../request'; // 导入用于获取数据的函数
import Masonry from 'react-masonry-css'; // 导入用于创建瀑布流布局的组件
import { Button, Tabs } from 'antd'; // 导入 Ant Design 的 Tabs 组件和 Button 组件
import './Render.scss'
// 定义组件 Render
function Render() {
  // 状态管理：存储图片数据
  const [imageData, setImageData] = useState<Array<{ id: string; image: string }>>([]);
  // 状态管理：当前页码
  const [currentPage, setCurrentPage] = useState<number>(1);
  // 定义每页显示的数据条数
  const itemsPerPage = 15;

  // 使用 useEffect 监听 currentPage 的变化，并在变化时重新获取数据
  useEffect(() => {
    // 调用函数获取数据，传递当前页码和每页条数作为参数
    getTemAll1(currentPage, itemsPerPage).then(res => {
      setImageData(res.data.list); // 将获取到的数据设置到状态中
    });
  }, [currentPage]);

  // 计算当前页应该显示的数据
  const indexOfLastItem = currentPage * itemsPerPage;
  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
  const currentItems = imageData.slice(indexOfFirstItem, indexOfLastItem);

  // 计算总页数
  const totalPages = Math.ceil(imageData.length / itemsPerPage);

  // 分页处理函数
  const handlePageChange = (page: number) => {
    if (page >= 1 && page <= totalPages) {
      setCurrentPage(page); // 更新当前页码
    }
  };

  // 生成唯一的 key 值，避免 React 渲染中的 key 冲突
  const uniqueKeys = new Set();
  function generateUniqueKey(id: string) {
    let key = id;
    let count = 1;
    while (uniqueKeys.has(key)) {
      key = `${id}_${count}`;
      count += 1;
    }
    uniqueKeys.add(key);
    return key;
  }

  // Tabs 组件的 onChange 事件处理函数
  const onChange = (key: string) => {
    console.log(key); // 打印当前选中的 Tab 键值
  };

  // 定义 Tabs 组件的 items，每个 Tab 包含一个 key、一个 label 和一个 children 内容
  const items = [
    {
      key: '1',
      label: '热门推荐',
      children: (
        <Masonry
          breakpointCols={{ default: 5, 1100: 3, 700: 2, 500: 1 }}
          className="my-masonry-grid"
          columnClassName="my-masonry-grid_column"
        >
          {currentItems.map(item => (
            <div className='aaa' key={generateUniqueKey(item.id)} style={{ marginBottom: '10px' }}>
              <img
                src={item.image}
                alt="Image"
                style={{ width: '100%', borderRadius: '10px', display: 'block' }}
              />
            </div>
          ))}
        </Masonry>
      ),
    },
    {
      key: '2',
      label: '最新上传',
      children: 'Content of Tab Pane 2',
    },
    {
      key: '3',
      label: '最多使用',
      children: (
        <Masonry
          breakpointCols={{ default: 5, 1100: 3, 700: 2, 500: 1 }}
          className="my-masonry-grid"
          columnClassName="my-masonry-grid_column"
        >
          {currentItems.map(item => (
            <div className='aaa' key={generateUniqueKey(item.id)} style={{ marginBottom: '10px' }}>
              <img
                src={item.image}
                alt="Image"
                style={{ width: '100%', borderRadius: '10px', display: 'block' }}
              />
            </div>
          ))}
        </Masonry>
      )
    },
  ];

  // 渲染组件
  return (
    <div className='module-center'>
      {/* 渲染 Tabs 组件，传入 items 和 onChange 处理函数 */}
      <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
      {/* 分页按钮和输入框 */}
      <div id="bottom">
        <div style={{ height: '80px', lineHeight: '80px', textAlign: 'center' }}>
          <Button onClick={() => handlePageChange(currentPage - 1)} disabled={currentPage === 1}>上一页</Button>&nbsp;
          {[...Array(totalPages).keys()].map(page => (
            <Button
              key={page + 1}
              onClick={() => handlePageChange(page + 1)}
              style={{ fontWeight: currentPage === page + 1 ? '900' : 'normal' }}
            >
              {page + 1}
            </Button>
          ))}
          <Button onClick={() => handlePageChange(currentPage + 1)} disabled={currentPage === totalPages}>下一页</Button>&nbsp;
          到第&nbsp;
          <input type="number" value={currentPage} onChange={(e) => handlePageChange(Number(e.target.value))} style={{ width: '50px' }} />&nbsp;
          页&nbsp;
          <Button onClick={() => handlePageChange(currentPage)}>确定</Button>&nbsp;
        </div>
        <hr />
        {/* 底部的其他链接和信息 */}
        <div className='sps'>
          <span>创客贴首页</span>
          <span><b>|</b></span>
          <span>帮助与支持</span>
          <span><b>|</b></span>
          <span>服务文档</span>
          <span><b>|</b></span>
          <span>关于我们</span>
          <span><b>|</b></span>
          <span>设计学院</span>
          <span><b>|</b></span>
          <span>教程</span>
          <span><b>|</b></span>
          <span>设计模板</span>
        </div>
        <div className='sps'>
          <span>用户协议</span>
          <span><b>|</b></span>
          <span>隐私协议</span>
        </div>
        <div className='sps2'>
          <span>Copyright©北京艺源酷科技有限公司</span>
          <span>京公网安备11010502049358号京1CP备14056892号-1网信算备110108349315101240027号网信算备110108349315101240019号</span>
          <button style={{ border: 'none', background: 'none', cursor: 'pointer' }}>更多^</button>
        </div>
      </div>
    </div>
  );
}

export default Render;